<template>
    <div>
        <el-drawer v-model="props.categoryDrawer" title="推荐分类" :before-close="handleCategoryVisibleClose" size="50%">
            <el-button type="primary" @click="addList()" style="margin: 10px 0">新增</el-button>
            <el-table :data="tableData">
                <el-table-column prop="websiteModuleName" label="标题" />
                <el-table-column prop="image" label="图片" align="center">
                    <template #default="scope">
                        <ImagePreview :src="scope.row.host" height="50px"></ImagePreview>
                    </template>
                </el-table-column>
                <el-table-column prop="url" label="链接" align="center" />
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button link type="primary" @click="cardEdit(scope.row)">编辑</el-button>
                        <el-button link type="danger" @click="cardDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-drawer>
        <AddWebCategory :listItem="publicItem" :brandVisible="brandVisible" :websiteId="props.websiteId"
            :moduleId="props.listItem.id" :languageId="props.languageId"
            @handleBrandVisibleClose="handleBrandVisibleClose" @handleBrandVisibleSure="handleBrandVisibleSure">
        </AddWebCategory>
    </div>
</template>
<script setup>
import { ref, defineProps, defineEmits, onMounted, watch, reactive } from "vue";
import AddWebCategory from "../components/addWebCategory.vue";
const emits = defineEmits(["handleCategoryVisibleClose"]);
const { proxy } = getCurrentInstance();
const publicItem = ref({}); //公共赋值对象参数
const brandVisible = ref(false);
const tableData = ref([]);

const props = defineProps({
    categoryDrawer: {
        type: Boolean,
        default: false,
    },
    // 传值数据对象
    listItem: {
        type: Object,
        default: {},
    },
    websiteId: {
        type: [String, Number],
        default: "",
    },
    languageId: {
        type: String || Number,
        default: "",
    }
});
const searchFrom = ref({
    pageNum: 1,
    pageSize: 999,
    param: {
        websiteId: Number(props.websiteId), //网站id
        moduleId: null, //模块id
        moduleType: "Category",
    },
});
watch(
    () => props.categoryDrawer,
    () => {
        if (!props.categoryDrawer) return;
        getList();
    }
);

const getList = () => {
    searchFrom.value.param.moduleId = props.listItem.id;
    site.moduleline
        .sitewebsitemodulelineList({
            data: searchFrom.value,
        })
        .then((res) => {
            if (res.data?.length) {
                res.data = res.data.map((item) => {
                    return {
                        ...item,
                        newImage: item.host,
                    };
                });
            }
            tableData.value = res.data;
        });
};
const cardDelete = (row) => {
    var newArray = [];
    newArray.push(row.id);
    proxy.$modal.confirm("是否确认删除此数据项？").then(() => {
        site.moduleline
            .sitewebsitemodulelineDeletebatch({
                data: {
                    ids: newArray,
                    moduleId: props.listItem.id,
                },
            })
            .then((res) => {
                if (res.code === 200) {
                    getList();
                    proxy.$message.success("删除成功");
                }
            });
    });
}
// 新增
const addList = () => {
    publicItem.value = {};
    brandVisible.value = true;
};
// 编辑
const cardEdit = (rowItem) => {
    publicItem.value = rowItem;
    brandVisible.value = true;
};
//   添加照片的列表的确定取消
const handleBrandVisibleClose = () => {
    brandVisible.value = false;
};
const handleBrandVisibleSure = (rowItem) => {
    brandVisible.value = false;
    getList();
};
const handleCategoryVisibleClose = () => {
    emits("handleCategoryVisibleClose");
}

</script>